<template>
  <div class="main">
    <div class="Breadcrumb"></div>
    <el-table :data="vipList" border style="width: 100% text-align:center">
      <el-table-column label="产品图片" width="130">
         <template v-slot="{row}">
          <el-avatar shape="square" :size="80" fit="scale-down" :src="row.imageUrl">
					</el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="产品名称" width="308">
      </el-table-column>
      <el-table-column prop="description" label="产品描述" width="310">
      </el-table-column>
      <el-table-column prop="price" label="价格(元)" width="310">
      </el-table-column>
      <el-table-column prop="inventory" label="库存" width="310">
      </el-table-column>
      <el-table-column label="操作" width="310" v-slot="{row}">
        <el-button type="success" @click="pre_order(row)" icon="iconfont icon-vip3">充值</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as api from "@/api/transaction";
export default {
  meta: {
    title: "vipCharge",
    name: "vip充值",
    icon: "iconfont icon-chongzhi",
  },
  data() {
    return {
      vipList: [],
    };
  },
  methods: {
    getVipList() {
      api.getVipListApi().then((res) => {
        this.vipList = res.data.data;
        // console.log(this.vipList);
      });
    },
    pre_order(row) {
      // console.log(row);
      let {product_id} = row
      this.$confirm(
        "你正在购买vip3充值, 是确认?尊贵vip3充值-vip包月服务,心悦vip3,尊贵体验,强行踢人下线,你值得拥有",
        "购买提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        }
      )
        .then(() => {
          this.$router.push({path:"/PreOrder",query:{product_id}});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取购买",
          });
        });
    },
  },
  created() {
    this.getVipList();
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-avatar {
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-left:16px ;
	 img {
		width: 80px;
    height: 30px;  

	}}
#app {
  .layout-container {
    .el-container {
      .is-vertical {
        .el-main {
          background-color: #fff;
          .main {
            line-height: 14px;
            font-size: 14px;
            text-align: left;
            .Breadcrumb {
              margin: 20px 0 30px 0;
              .Breadcrumb__item:nth-of-type(1) {
                font-weight: 900;
              }
              .Breadcrumb__item:nth-of-type(1):active {
                color: skyblue;
              }
              .Breadcrumb__item:nth-of-type(2) {
                font-weight: 900;
              }
              .Breadcrumb__item:nth-of-type(1):hover {
                cursor: pointer;
                color: skyblue;
              }
            }
            /deep/ .el-table {
              .el-table__cell {
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>